<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		.content{
			/*设置宽和高*/
						width:420px;
						height: 300px;
				         top: 50px;
						 left: 50px;
						 padding:10px 0;
						/*设置背景颜色*/
						background-color: greenyellow;
						/*开启相对定位*/
						position: absolute;
						/*裁剪溢出的内容*/
						overflow: hidden;
						
		
		}
		.imgList{
			position: absolute;
			left: 0px;
			list-style: none;
			width: 2520px;
		
		}
		.imgList li{
			float: left;
		}
		.imgList li img{
			width:400px;
			height: 300px;
			margin: 0 10px;
		}
       .navhref{
		   position: absolute;
		   bottom: 20px;
		  
	   }
	   .navhref a{
		   width: 10px;
		   height: 10px;
		   border-radius: 5px;
		   float: left;
		   background-color: red;
		   margin: 0 5px;
	   }
	   .navhref a:hover{
		   background-color: blue; 
	   }
	</style>
	<script src="js/tools.js"></script>
	<script type="text/javascript">
		window.onload=function(){
			//回去imgList
		var imgList =document.querySelector(".imgList");
		 //获取图片列表
	    var imgArr=document.getElementsByTagName("img");
		//设置总宽度
		imgList.style.width=imgArr.length*420+'px';
		imgList.style.left=-0+'px'
		//居中
		 var navhref =document.querySelector(".navhref");
		 var content =document.querySelector(".content");
		 navhref.style.left=(content.offsetWidth-navhref.offsetWidth)/2+'px'
		 var aList =document.getElementsByTagName("a");
		 //第一个点的标识
		 var index=0;
		 aList[index].style.backgroundColor="black"
		 //定义一个自动切换的定时器的标识
		 				var timer;
		 for(var i=0;i<aList.length;i++){
			 var liElemet=aList[i];
			 
			 liElemet.num=i;
			 //设置事件函数
			 liElemet.onclick=function(){
				      
				  // imgList.style.left=-content.offsetWidth * this.num+'px';
				  //关闭自动切换的定时器
				  	clearInterval(timer);
				  //设置默认样式
				 index=this.num;
				 //设置选中的a
				   setA();
				   move(imgList,
				   "left",
				   -content.offsetWidth * index,
				   10,function(){
					   console.log("滑动结束")
					   autoChange();
				   })
				
			 }
		
		 }
		 autoChange()
		
		function setA(){
			 //判断当前索引是否是最后一张图片
			 	if(index >= imgArr.length - 1){
			 						//则将index设置为0
			 		index = 0;
			 						
			 			//此时显示的最后一张图片，而最后一张图片和第一张是一摸一样
			 			//通过CSS将最后一张切换成第一张
			 		imgList.style.left = 0;
			 	}
			
			   for(var i=0;i<aList.length;i++){
				   
				  aList[i].style.backgroundColor = 'red'
			  }
			  console.log("setA"+index)
			  aList[index].style.backgroundColor = 'black'
			   
		 }
		 
	
						//开启一个定时器，用来定时去切换图片
		 function autoChange(){
			timer= setInterval(function(){
				 index++
				 console.log(index)
					//判断index的值
				  index %= imgArr.length;
				  console.log(index)
			
				 move(imgList,
				 "left",
				 -content.offsetWidth * index,
				 20,function(){
				 		setA();
				 })
				
			 },3000)
		 }
	}
		
	</script>
	<body>
		<div class="content">
			<ul class="imgList" >
				<li><img src="img/1.png"></li>
				<li><img src="img/2.png"></li>
				<li><img src="img/3.png"></li>
				<li><img src="img/4.png"></li>
				<li><img src="img/5.png"></li>
				<li><img src="img/6.png"></li>
				<li><img src="img/1.png"></li>
			</ul>
			<div class="navhref">
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
			</div>
		</div>
	</body>
</html>
